<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雨滴下落效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            background-color: #000;
            display: block;
        }
    </style>
</head>
<body>
<canvas id="canvas">您的浏览器不支持，请更换！</canvas>
<script>
    var can = document.getElementById("canvas");
    var ctx = can.getContext("2d");
    var w = can.width = window.innerWidth,
        h = can.height = window.innerHeight;
    window.onresize = function () {
        w = can.width = window.innerWidth;
        h = can.height = window.innerHeight;
    };
    /*
        ctx.fillStyle = "red";//填充为红色
        ctx.fillRect(50,50,100,100);//绘制矩形，参数分别为横、纵坐标和宽高。
        //绘制圆形，参数分别为横纵坐标，半径，起始结束角度范围，顺逆时针方向。
        ctx.arc(250,250,50,0,Math.PI*2,false);
        ctx.fill()//圆形没有像矩形一样的边绘制边填充的方法
    */
    //动画原理：
    /*
        var y = 0;
        setInterval(function () {
            y+=2;
            //ctx.clearRect(0,0,w,h);//擦除画布
            //绘制透明层
            ctx.fillStyle = "rgba(0,0,0,0.05)";
            ctx.fillRect(0,0,w,h);
            //绘制矩形
            ctx.fillStyle = "#3ff";
            ctx.fillRect(50,y,2,10)
        },1000/60)
    */
    //创建雨滴类
    function Drop() {
    }

    //给雨滴类添加原型方法
    Drop.prototype = {
        init: function () {
            this.x = random(0, w);
            this.y = 0;
            this.vy = random(4, 6);//下落速度
            this.l = random(h * .8, h * .9);
            this.r = 1;
            this.vr = 1;
            this.a = 1;
            this.va = .9;
//            console.log(this);//this指具体实例化的雨滴对象
        },
        draw: function () {
            if (this.y < this.l) { //绘制竖线条
                ctx.fillStyle = "#3ff";
                ctx.fillRect(this.x, this.y, 2, 10);
            } else { //绘制圆
                ctx.strokeStyle = "rgba(51,255,255," + this.a + ")";
                ctx.beginPath();//相当于抬笔重画
                ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
                ctx.stroke();//画轮廓
            }

            this.update();
        },
        update: function () {
            if (this.y < this.l) {
                this.y += this.vy;//更新坐标

            } else {
                if (this.a > .03) {
//                    ctx.beginPath();
                    this.r += this.vr;//更新半径
                    if (this.r > 50) {
                        this.a *= this.va;//更新透明度
                    }
                } else {
                    this.init();//消失后重来
                }


            }
        }
    };
    var drops = [];//所有雨滴
    for (var i = 0; i < 60; i++) {
        setTimeout(function () {
            var drop = new Drop();
            drop.init();
            drops.push(drop);
        }, i * 200)
    }
    setInterval(function () {
        ctx.fillStyle = "rgba(0,0,0,.08)";
        ctx.fillRect(0, 0, w, h);
        for (var j = 0; j < drops.length; j++) {
            drops[j].draw();
        }
    }, 1000 / 60);

    console.log(drops);

    //随机函数
    function random(min, max) {
        return Math.random() * (max - min) + min;
    }
</script>
</body>
</html>